<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>打开新窗口</title>
        <style>
            .container { border: 1px solid blue; }
            .container>div { border: 1px solid gray ;margin: 15px; height: 50px; line-height: 50px; }
            .container>div:nth-child(2n) { background: #dfdfdf; }
            .container>div:nth-child(2n+1) { background: #ffff00; }
        </style>
    </head>
    <body>
        <div class="container"></div>
        <script>
            (function(){
                const container = document.querySelector('.container');

                container.addEventListener('click', evt => {
                    // 以当前位置为参照向某个方向滚动
                    // scrollBy(10, 10); // scrollBy( horizontal, vertical)
                    // 滚动到指定位置
                    scrollTo(0, 500); // scrollTo( horizontal, vertical)
                }, false);

                for(let i = 1 ; i < 100; i++ ){
                    let child = document.createElement('div');
                    child.innerHTML = i;
                    container.appendChild(child);
                }
            })();
        </script>
    </body>
</html>